<template>
  <div>
    <div class="tabs-bar">
      <ul>
        <li v-for="(label, index) in labels" :key="index" :class="{active: curTab == label}" @click="changeTab(label)">{{ label }}</li>
      </ul>
    </div>
    <wait v-if="curTab == '待处理'"/>
    <finish v-else-if="curTab == '已解除'"/>
  </div>
</template>

<script>
import wait from './wait'
import finish from './finish'

export default {
  name: 'order-exception',
  components: { wait, finish },
  data() {
    return {
      labels: ['待处理','已解除'],
      curTab: '待处理'
    }
  },
  methods: {
    changeTab(curTab) {
      this.curTab = curTab
    }
  }
}
</script>

<style lang="stylus" scoped>
.tabs-bar
  position relative
  z-index 0
  margin: 0 10px
  &:after
    content ''
    position absolute
    left 0
    right 0
    bottom 0
    display block
    height 1px
    background #ECF0F7
  ul
    position relative
    z-index 10
    display flex
    li
      margin-right 22px
      padding 8px 0 4px
      cursor pointer
      font-size 12px
      &.active
        border-bottom 2px solid #4090FF
        color #4090FF
</style>
